import React,{forwardRef,useState,useEffect} from 'react'
import { Form, Input, Select } from 'antd'
const { Option } = Select

// 使用 forwardRef 方法包裹住当前组件的时候，当前组件就能够接收到两个形参，一个是props，一个是ref，这个ref能够接收到父组件传递过来的ref属性
const UserForm = forwardRef((props,ref)=>{

    // 这个变量决定Select下拉菜单组件是否禁用
    const [isDisable,setIsDisable] = useState(false)

    // 从本地存储中获取token数据，并且解构赋值
    // roleId 是当前用户角色对应的id值，region 是当前用户所在的区域
    const { roleId, region } = JSON.parse(localStorage.getItem("token"))
    
    // 下面这个对象中存储的是id值对应的角色名称
    const roleObj = {
        // 当roleId值为1的时候，角色名称为superadmin，也就是 超级管理员
        "1": "superadmin",
        // 当roleId值为2的时候，角色名称为admin，也就是 区域管理员
        "2": "admin",
        // 当roleId值为2的时候，角色名称为editor，也就是 区域编辑
        "3": "editor",
    }

    // 这个函数决定用于region区域选择的组件Select中的下拉选项Option是否是禁用状态，这个函数如果返回的值是 true，那么就是要禁用，如果为 false，就是不禁用
    const checkRegionDisabled = (item)=>{
        // 根据父组件传递过来的 isUpdate 判断当前进行的操作是更新用户数据还是新增用户
        if (props.isUpdate) {
            // 更新用户操作
            if (roleObj[roleId] === "superadmin") { // 判断用户的角色，如果用户的角色是超级管理员，那么Select组件下的所有Option选项都不会被禁用，都能够被选中
                return false
            } else {
                return true
            }
        } else {
            // 添加用户操作
            if (roleObj[roleId] === "superadmin") {
                return false
            } else {
                // 如果用户不算超级管理员，那么用户只能选中用户当前所在的区域对应Option选项
                return item.value !== region
            }
        }
    }

    // 这个函数决定用于role角色选择的组件Select中的下拉选项Option是否是禁用状态，这个函数如果返回的值是 true，那么就是要禁用，如果为 false，就是不禁用
    const checkRoleDisabled = (item)=>{
        // 根据父组件传递过来的 isUpdate 判断当前进行的操作是修改用户信息还是新增用户
        if (props.isUpdate) {
            // 修改用户信息操作
            if (roleObj[roleId] === "superadmin") { // 判断用户的角色，如果用户的角色是超级管理员，那么Select组件下的所有Option选项都不会被禁用，都能够被选中
                return false
            } else {
                return true
            }
        } else {
            // 添加用户操作
            if (roleObj[roleId] === "superadmin") {
                return false
            } else {
                return roleObj[item.id] !== "editor"
            }
        }
    }

    useEffect(()=>{
        setIsDisable(props.isUpdateDisabled)
    },[props.isUpdateDisabled]) // 设置依赖，这里是当父组件传递过来的isUpdateDisabled属性改变的时候，就触发这个useEffect钩子

    return (
        // 这里只要把 ref 属性绑定到指定的组件上，父组件中就可以通过指定的属性(addForm)获取到指定的组件实例
        // 这里是把 ref 属性绑定给 Form 组件，那么父组件中就可以通过 addForm(因为父组件中的addForm是通过useRef钩子创建出来的，并且传递过来的ref属性的属性值就是addForm) 获取到这个 Form 组件实例
        <Form layout="vertical" ref={ref}>
            <Form.Item
                // 可以用过name属性值来获取对应的Form.Item下的表单组件的值
                name="username"
                // label 设置标题
                label="用户名"
                // rules 设置下面表单组件的规则
                // required 是设置当前表单组件是必填项
                rules={[{ required: true }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                name="password"
                label="用户密码"
                rules={[{ required: true }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                name="region"
                label="区域"
                // rules用于设置当前这个表单项的规则，它的值是一个数组
                // 下面是当isDisable值为true，也就是当前这个表单项处于禁用状态时，那么就将rules的值设置为空数组，也就是不设置任何规则
                // 如果isDisable为false，当前表单项不处于禁用状态，设置指定的规则
                // message 是设置当前表单项校验错误时的提示信息
                rules={isDisable?[]:[{ required: true, message: "请输入内容" }]}
            >
                <Select disabled={isDisable}>
                    {
                        // 根据父组件传递过来的数据 regionList 遍历 Option 组件，然后放在 Select 组件中
                        props.regionList.map((item) => {
                            return <Option value={item.value} key={item.id} disabled={checkRegionDisabled(item)}>{item.value}</Option>
                        })
                    }
                </Select>
            </Form.Item>

            <Form.Item
                name="roleId"
                label="角色"
                rules={[{ required: true }]}
            >
                <Select onChange={(value)=>{    
                    // value 接收的当前下拉菜单组件选中的option选项对应的value值
                    // value等于1的时候说明这个下拉菜单组件选中的option的内容是 超级管理员
                    if(value === 1){
                        // 将 isDisable 的值修改为 true，禁用上面那个区域选择下拉菜单组件Select
                        setIsDisable(true)
                        // 下面的操作是将 上面那个下拉菜单组件的内容修改为空
                        // ref 这个属性不仅可以在其他组件中使用，在当前组件中也能
                        // 通过ref获取到Form组件实例
                        // Form组件中可以通过setFieldsValue方法修改它里面Form.Item组件的内容
                        ref.current.setFieldsValue({
                            // 属性名是要被修改内容的Form.Item组件的name属性，属性值是修改后的内容
                            region:""
                        })
                    }else{
                        setIsDisable(false)
                    }
                }}>
                    {
                        // 根据父组件传递过来的数据 regionList 遍历 Option 组件，然后放在 Select 组件中
                        props.roleList.map((item) => {
                            return <Option value={item.id} key={item.id} disabled={checkRoleDisabled(item)}>{item.roleName}</Option>
                        })
                    }
                </Select>
            </Form.Item>
        </Form>
    )
})

export default UserForm
